import {designPage, onMounted, useRefs} from "plain-design-composition";
import {PlIcon, PlTooltip} from "plain-design";
import React from "react";
import {MicroLibService} from "@/micro/utils/MicroLibService";

export default designPage(() => {

    const {refs, onRef} = useRefs({chartEl: HTMLDivElement})

    onMounted(async () => {
        const echarts = await MicroLibService.load.echarts()
        const ins = echarts.init(refs.chartEl!)

        ins.setOption({
            grid: {
                top: '0',
                left: '0',
                right: '0',
                bottom: '0',
            },
            xAxis: {
                show: false,
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                show: false,
                type: 'value'
            },
            series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }],
            visualMap: [{
                show: false,
                type: 'value',
                seriesIndex: 0,
                min: 150,
                max: 300
            }]
        })
    })

    return () => (
        <div className="pro-data-statistic-summary-card">
            <div className="pro-data-statistic-summary-card-title">
                <span>活动运营</span>
                <PlTooltip tooltip={'更多'}>
                    <PlIcon icon={'el-icon-menu'} status="primary"/>
                </PlTooltip>
            </div>
            <div className="pro-data-statistic-summary-card-result">
                87.66%
            </div>
            <div ref={onRef.chartEl} className="pro-data-statistic-chart-el"/>
            <div className="pro-data-statistic-summary">
                <span>用户满意度：</span>
                <span>88.66%</span>
                <PlIcon icon={'el-icon-caret-top'} status={'success'}/>
            </div>
        </div>
    )
})